<template>
  <div class="contentDefault">
    <div class="selectList">
      <button class="searchBtn" type="button" @click="newTab">+&nbsp;&nbsp;添加</button>
      <div class="operate-cont">
        <a class="oper-btn" href="javascript:;" ref="text" @click="editTravel(task)">
          <span class="edit-icon"></span>
          <span>编辑</span>
        </a>
        <a class="oper-btn" href="javascript:;" ref="dele" @click="deleTravel(task)">
          <span class="dele-icon"></span>
          <span>删除</span>
        </a>
      </div>
    </div>
    <div class="datas-box" v-show="listBox">
      <div class="left-cont">
        <table class="table table-bordered table-hover" ref="groupTable" id="groupTable">
          <thead>
          <tr class="active">
            <th>旅行社名称</th>
            <th>旅行社级别</th>
            <th>联系人姓名</th>
            <th>联系人电话</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(val,index) in list" @click="getTask(val)">
            <td><span>{{val.name || '未设置'}}</span></td>
            <td>
              <p v-if="val.star">
                <img class="star-img" v-for="item in val.star" :src="item" alt=""/>
              </p>
              <p v-else>未设置</p>
            </td>
            <td><span>{{val.contactsName || '未设置'}}</span></td>
            <td><span>{{val.contactsMobile || '未设置'}}</span></td>
          </tr>
          </tbody>
        </table>
        <FootPage :Pieces="pieces" :PiecePage="pageNum" :Page="pages" v-on:current-page="currentPage"></FootPage>
      </div>
      <div class="detail-box">
        <div class="detail-head">详细信息</div>
        <div class="detal-content">
          <div>旅行社名称：{{tInfos.name || '未设置'}}</div>
          <div>
            <p class="inline-element">旅行社级别：</p>
            <p class="inline-element" v-if="tInfos.star">
              <img class="star-img" v-for="item in tInfos.star" :src="item" alt=""/>
            </p>
            <p class="inline-element" v-else>未设置</p>
          </div>
          <div>联系人姓名：{{tInfos.contactsName || '未设置'}}</div>
          <div>联系人电话：{{tInfos.contactsMobile || '未设置'}}</div>
          <div>接团次数：{{tInfos.tuanTotal || 0}}</div>
          <div>旅行社名称：{{tInfos.credentialsSn || '未设置'}}</div>
          <div>地区：{{tInfos.area || '未设置'}}</div>
          <div>详细地址：{{tInfos.address || '未设置'}}</div>
          <div>备注：{{tInfos.demo || '未设置'}}</div>
        </div>
      </div>
    </div>
    <div class="NoData" v-show="NoData">
      对不起，没有数据
    </div>
  </div>
</template>
<script>
  import FootPage from '@/components/public/footpage'
  export default {
    data(){
      return {
        // 数据控制显示模块
        NoData:false, // 没有数据的时候的模块 默认隐藏
        listBox:true, // 数据列表模块 默认显示
        listHttp:'',// 数据接口连接】
        pieces:'',//数据总数
        pageNum:'',//每页数据条数
        pages:'',//当前页码
        SubNav:'旅行社',
        title:'',//标题,
        list:'', // 列表数据
        deleteHttp: '',
        task: {},
        tInfos: {},
        empty_star: '',
        star: ''
      }
    },
    props:['subNav'],
    watch:{
      subNav: function(val) { // 二级导航数据
        this.pagination(window.location.href,1)
        this.pages=this.paginations(1);
        this.port(); //获取对应的二级导航数据
      }
    },
    computed:{
      listUrl(){
        return this.$store.state.interface.travelGencyList;
      },
      deleUrl(){
        return this.$store.state.interface.deleTravelgency;
      }

    },
    filters: {
    },
    methods:{
      newTab(){
        this.$store.commit('NEW_TRAVELGENCY_TAB',{
          title:'添加',
          components:'TravelgencyProNew'
        });
      },
      editTravel(task){
        if (task.id) {
          this.$store.commit('NEW_TRAVELGENCY_TAB',{
            title:'编辑',
            components:'TravelgencyProEdit',
            dataId:task.id,
          });
        } else {
          layer.msg('请选择要编辑的旅行社！');
        }
      },
      deleTravel(task){
        if (task.id) {
          let formData = new FormData();
          let self = this;
          let deleteUrl = self.deleteHttp;
          formData.append('id', task.id);
          layer.confirm(`确定删除${task.name}？`, {
            btn: ['确定','取消'] //按钮
          }, function(){
            self.$ajax.post(deleteUrl, formData).then(function(res){
              let code = res.data.code;
              if(code === '10000'){
                layer.msg('删除成功!');
                self.$nextTick(() => {
                  self.port(); //获取的数据
                });
              } else{
                layer.msg('删除失败!');
              }
            });
          }, function(){
            // 取消
          });
        } else {
          layer.msg('请选择要删除的旅行社！');
        }
      },
      inquire(){//查询
        let self = this;
        if(self.trigger==true){
          self.trigger=false;
          self.pagination(window.location.href,1)
          self.pages=self.paginations(1);

          self.port(); //获取对应的数据
          self.triggerTime=setTimeout(function(){
            self.trigger=true;
          },1500)
        }
      },

      currentPage: function(msg){
        this.pages = msg;
        if(this.title==''){
          this.pagination(window.location.href,msg)
          this.pages=this.paginations(this.pages);
        }
        this.port(); //获取对应页码数据
      },
      // 星星数目显示
      rankStars (star_num, stars=[]) {
        let self = this;
        let empty_star_num = 5 - star_num;
        if (star_num > 0) {
          for (let i = 0; i < star_num; i++) {
            stars.push(self.star);
          }
          if (empty_star_num * 1 !== 0) {
            for (let i = 0; i < empty_star_num; i++) {
              stars.push(self.empty_star);
            }
          }
        }
        return stars;
      },
      // 获取数据函数port()
      port(){
        let self = this;
        layer.load(2);
        let formData = new FormData(); // 基础信息表单数据
        formData.append('pageId', self.pages);
        formData.append('size', self.pageNum);

        self.$ajax.post(self.listHttp,formData).then(function(res){
          layer.closeAll('loading');
          let code = res.data.code;
          let result = res.data.result;
          if(code === '10000' && result['WbTravelGency.list'].amount * 1 > 0){
            self.NoData = false;
            self.listBox = true;
            self.list = result['WbTravelGency.list'].list
            self.pieces = result['WbTravelGency.list'].amount;
            self.tInfos = self.list[0];
            for (let item of self.list) {
              item.star = self.rankStars(item.rank*1);
            }
            // 详情里星星数量显示
            let infoRank = self.tInfos.rank*1;
            for (let i = 0;i<infoRank;i++) {
              self.tInfos.star = self.rankStars(infoRank);
            }
            self.$nextTick(() => {
              $('.datas-box').height($(document).height());
              $('.left-cont').height($(document).height());
              $('.detail-head').height($('#guiderTable thead').height());
            });
          } else{
            // 没有数据或者数据错误
            self.NoData = true;
            self.listBox = false;
            self.pieces = 0;
            self.codes(code);
          }

          self.$nextTick(() => {
            $('#groupTable tr').each(function () {
              $(this).on('click', function () {
                $(this).addClass('click-active');
                $(this).siblings().removeClass('click-active');
              })
            });
          });

        },function(res){
          layer.closeAll('loading');
          layer.msg('服务器错误！')
          self.pieces=0;
        })
      },
      filterTime (time) {
        if (time) {
          let gtime = time.trim().split(/\s+/)[0];
          return gtime;
        } else {
          return '未设置'
        }
      },
      getTask (val) {
        this.task = val;
        this.tInfos = val;
        // 详情里星星数量显示
        let infoRank = this.tInfos.rank*1;
        for (let i = 0;i<infoRank;i++) {
          this.tInfos.star = this.rankStars(infoRank);
        }
      }
    },
    beforeMount(){
      let self = this;
      let url = self.listUrl;
      let sessionId = JSON.parse(sessionStorage.getItem('customer')).sid;
      self.listHttp = `${url}?sid=${sessionId}`;
      self.deleteHttp = `${self.deleUrl}?sid=${sessionId}`;//删除
      self.pageNum = self.$store.state.pageNum;
      // 页码
      self.pages = self.paginations(this.pages);
      // 调用获取数据函数port()
      self.port();
    },
    mounted(){
    },
    components:{
      FootPage
    }

  }
</script>
<style lang="scss" scoped>
  /*表格*/
  .datas-box{
    display:box; /*（伸缩盒最老版本） */
    display:-webkit-box;  /* iOS 6-, Safari 3.1-6 */
    display:-webkit-flex; /* Chrome */
    display:-moz-box;     /* Firefox 19 */
    display:-ms-flexbox;
    display:flex;  /*flex容器*/
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #ddd;
  }

  .table-bordered{
    .link{
      span{
        word-wrap:break-word ;
        word-break:break-all;
      }
    }
  }
  .oper-btn{color: #09ba79;margin-right: 10px;}
  .oper-btn:last-child{margin-right: 0;}
  .selectList{padding: 14px 12px;}
  .operate-cont{float: right;}
  .oper-btn{float: left;margin-top: 8px;margin-right: 18px;}
  .oper-btn:last-child{margin-right: 0;}
  .dele-icon, .edit-icon{
    /*display: inline-block;*/
    float: left;
    width: 15px;
    height: 16px;
    background: url("../../assets/images/delete2.png") no-repeat;
    background-size: 100% 100%;
    margin-right: 4px;
  }
  .edit-icon{
    background: url("../../assets/images/edit_icon.png") no-repeat;
    background-size: 100% 100%;
  }
  tr.click-active{
    background: #f5f5f5;
  }
  .left-cont{
    width: 76%;
    margin: 10px;
  }
  .detail-box{
    width: 24%;
    background: #fff;
    border-left: 1px solid #ddd;
    overflow-y: auto;
  }
  .detal-content{padding: 10px 14px;}
  .detal-content div{padding-bottom: 14px;}
  .table-bordered{
    border-left: none!important;
    border-right: none!important;
  }
  .detail-head{
    background: #09ba79;color: #fff;
    padding: 0 14px;
    line-height: 33px;
    font-size: 14px;
  }
  img.star-img{
    display: inline-block;width: 14px;margin-right: 2px;
  }
  .inline-element{display: inline-block;}

</style>
